<style scoped>
</style>
<template>
  <div><canvas id='barTemplate0'></canvas></div>
</template>
<script>
    export default {
        props:['xlabels','ele','eledata','option'],
        data () {
            return {
              dataAll: {
                labels:null,
                datasets:[]
              },
              iden:"barTemplate0",
              count:-1
            }
        },
        created:function(){
          this.getLable();
          this.getEledata();
          this.getEle();//规定一定要先获取数据，然后再进行渲染
        },
        mounted:function(){
          var ctx = document.getElementById('barTemplate0').getContext('2d');
          console.log(this.dataAll);
          var myBarChart = new Chart(ctx, {
            type: 'bar',
            data: this.dataAll,
            options: this.option
          });
        },
        methods:{
          getLable:function(){//获取X轴的值
            this.dataAll.labels = this.xlabels;
          },
          getEle:function(){
            for(var i = 0;i < this.ele.length;i ++){
              this.dataAll.datasets[i].backgroundColor = "#ccc";
              this.dataAll.datasets[i].borderColor = "#ccc";
              if (this.ele[i].BGcolor != undefined && this.ele[i].BGcolor != "") {
                this.dataAll.datasets[i].backgroundColor = this.ele[i].BGcolor;
              }
              if (this.ele[i].Bcolor != undefined && this.ele[i].Bcolor != "") {
                this.dataAll.datasets[i].borderColor = this.ele[i].Bcolor;
              }
              this.dataAll.datasets[i].label = this.ele[i].label;
            }
          },
          getEledata:function(){
            var temp = [];
            var dataset={};
            for(var index=0;index<this.eledata.length;index++){
              dataset={}
              dataset.data = this.eledata[index];
              temp.push(dataset);
            }
            this.dataAll.datasets = temp;
          }
        }

    }
</script>
